<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>持仓管理</title>
    <script src="js/public.js"></script>
    <!--<link rel="stylesheet" href="css/index.css" type="text/css">-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/currency.css"/>
    <link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.css"/>
    <link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.min.css"/>

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Access-Control-Allow-Origin" content="application/json; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 启用 WebApp 全屏模式 -->
    <meta http-equiv="Cache-Control" content="no-transform "/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta name="format-detection" content="telphone=no, email=no"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script src="js/rangeSlider.js" type="text/javascript"></script>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/md5.js" type="text/javascript"></script>

    <!--<script type="text/javascript">
    window.onload=function(){

           var fontsize = window.innerWidth/7.5>100?100:window.innerWidth/7.5>100;
           alert(fontsize)
        var winwidth = window.innerWidth
        document.documentElement.style.fontSize = winwidth/7.5 + 'px';
        window.onresize = function () {
            var winwidth = window.innerWidth;
            document.documentElement.style.fontSize = winwidth/7.5 + 'px';
        }
    }
</script>-->
</head>

<body>
<div class="container-fluid">
    <h1>持仓列表</h1>
    <div style="margin-bottom: 2rem;">
        <form class="form-inline" style="margin-top: 5px;margin-bottom: 5px;">
            <div class="pull-right input-group">
                <input id="search" type="text" style="width: 18rem;" class="form-control " placeholder="请输入股票id" aria-label="请输入股票id">
                <div class="input-group-append" id="UserSearch" style="cursor: pointer">
                    <span class="input-group-text"><i class="icon-search"></i>查询</span>
                </div>
            </div>
        </form>
    </div>

    <div class="table-responsive">
        <table class="table text-nowrap table-striped table-hover">
            <thead>
            <tr>
                <th>股票代码</th>
                <th>股票名字</th>
                <th>进场时间</th>
                <th>价格</th>
                <th>仓位</th>
                <th>持仓方式</th>
                <th>收益率</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <button class="btn btn-color-blue">
                        <i class="icon-arrow-down">&nbsp;</i>买入
                    </button><button class="btn btn-color-red">
                        <i class="icon-arrow-up">&nbsp;</i>卖出
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!--股票买入-->
    <div class="business" >
        <div style="width: 100%;">
            <h2 style="text-align: center;">策略名称</h2>
            <lable style="margin-left: 25rem">可用：</lable>
            <h3 style="margin-left: 2rem">买入</h3>
        </div>
        <div>
            <form class="strategy_form">
                <div>
                    <label>股票代码</label>
                    <input type='text' placeholder="请输入股票代码"/>
                </div>
                <div>
                    <label >股票名称</label>
                    <input type='text' placeholder="股票名称，点击时自动根据id获取">
                </div>
                <div>
                    <label>买入价</label>
                    <input type='number' placeholder="请输入买入价"/>
                </div>
                <div>
                    <label>买入比例</label>
                    <div class="volume">
                        <input id="buy_range_slider" type='range' value="0" />
                    </div>
                    <div class="volume_percent">
                        <input type="text"/>
                    </div>

                </div>
                <div >
                    <label>买入量</label>
                    <input type='text' placeholder="请输入买入量"/>

                </div>
                <div>
                    <label>买入额</label>
                    <input type='text' placeholder="请输入买入额"/>
                </div>
                <div>
                    <label>交易时间</label>
                    <input type='text' placeholder="请输入交易时间"/>
                </div>
                <div>
                    <label>交易方式</label>
                    <select style="margin: auto; padding: auto;font-size: 1.2rem;">
                        <option value="option1">多头</option>
                        <option value="option2">空头</option>
                    </select>
                </div>
                <div style="margin-left: 30%;">
                    <button class="btn" style="color: blue;"><i class="icon-ok"></i>确认</button>
                    <button class="btn" style="margin-left: 10%;color: red;"><i class="icon-remove"></i>取消</button>
                </div>
            </form>
        </div>
    </div>

    <!--股票卖出-->
    <div class="business" >
        <div style="width: 100%;">
            <h2 style="text-align: center;">策略名称</h2>
            <h3 style="margin-left: 2rem">卖出</h3>
        </div>
        <div>
            <form class="strategy_form">
                <div>
                    <label>股票代码</label>
                    <input type="text"  readonly="readonly" />
                </div>
                <div>
                    <label >股票名称</label>
                    <input type="text"  readonly="readonly" />
                </div>
                <div>
                    <label>持仓股数</label>
                    <input type="text"  readonly="readonly" />
                </div>
                <div>
                    <label>持仓价格</label>
                    <input type="text"  readonly="readonly" />
                </div>
                <div >
                    <label>持仓方式</label>
                    <input type="text"  readonly="readonly" />
                </div>
                <div>
                    <label>卖出价</label>
                    <input type='text' placeholder="请输入卖出价"/>
                </div>
                <div>
                    <label>卖出比例</label>
                    <div class="volume">
                        <input id="sell_range_slider" type='range' value="0" />
                    </div>
                    <div class="volume_percent">
                        <input type="text" id="amount"/>
                    </div>

                </div>
                <div>
                    <label>卖出量</label>
                    <input type='text' placeholder="请输入卖出量"/>
                </div>
                <div >
                    <label>卖出额</label>
                    <input type='text' placeholder="请输入卖出额"/>
                </div>
                <div>
                    <label>交易时间</label>
                    <input type='datetime' placeholder="默认显示当前时间，可调整"/>
                </div>
                <div style="margin-left: 30%;">
                    <button class="btn" style="color: blue;"><i class="icon-ok"></i>确认</button>
                    <button class="btn" style="margin-left: 10%;color: red;"><i class="icon-remove"></i>取消</button>
                </div>
            </form>
        </div>
    </div>

</div>


</body>

</html>